<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.js"></script>
    <style>
        .red {
            border: 1px red solid;
            height: 300px;
            width: 400px;
        }

        .blue {
            border: 1px blue solid;
            height: 300px;
            width: 400px;
        }
    </style>
</head>

<body>
<video controls id="video" autoplay playsinline class="red"></video>
<video controls id="show" autoplay class="red"></video>
<div>
    <button onclick="start()">录制视频</button>
    <button onclick="resume()">暂停</button>
    <button onclick="stop()">停止</button>
    <button onclick="play()">播放录制视频</button>
</div>

</body>
<script type="text/javascript">
    let stream = null;
    let recode=null;
    let data=null;
    /**
     * 开始摄像头
     */
    (async function () {
        let constraints = {
            video: true,
            audio: true
        };
        // 声音太响，还是改成false
        stream = await navigator.mediaDevices.getDisplayMedia(constraints);
        recode=new MediaRecorder(stream,{mimeType:"video/webm;codecs=h264"})
        document.getElementById("video").srcObject = stream;
        recode.ondataavailable=kk.bind(recode)

    })();

    function play(){
        if(data==null){
            alert("对不起，没有视频")
        }
        document.getElementById("show").src=URL.createObjectURL(data);
    }
    function kk(e){
        console.log(e);
        data=e.data;
    }
    async function start() {
        console.log("开始了")
        recode.start();
    }
    function resume(){
        console.log("")
        recode.resume();
    }
    function stop(){
        console.log("展厅了")
        recode.stop();
    }


</script>

</html>